<template>
<div>

<!--  用户头像及姓名-->
  <div>
    <img :src="photo" style="width: 100px;height: 100px;vertical-align: middle">
    <strong>{{name}}</strong>
  </div>

  <br>
<!--  我的订单-->
  <div>
    <h3>我的订单</h3>
      <!--下划线-->
    <el-divider></el-divider>
    <div style="display: inline;float: left;padding: 20px ">
    <img src="../assets/logo.png" style="width:60px"  @click="dai">
    <h3>待付款</h3>
    </div>

    <div style="display: inline;float: left;padding: 20px" >
      <img src="../assets/logo.png" style="width:60px"  @click="yi">
      <h3>待发货</h3>
    </div>

    <div style="display: inline;float: left;padding: 20px" >
      <img src="../assets/logo.png" style="width:60px"  @click="receipt">
      <h3>待收货</h3>
    </div>

    <div style="display: inline;float: left;padding: 20px" >
      <img src="../assets/logo.png" style="width:60px"  @click="evaluate">
      <h3>待评价</h3>
    </div>
  </div>
  <br>

  <div style="clear: both;">
    <h3 @click="collect">我的收藏</h3>
  </div>
  <el-divider></el-divider>

  <div style="clear: both;">
    <h3 @click="address">地址管理</h3>
  </div>
  <el-divider></el-divider>

  <div style="clear: both;">
    <h3 @click="opinion">意见反馈</h3>
  </div>



  <el-dialog title="待付款" :visible.sync="dialogFormVisibleFu" width="500px">
    <h1>待付款</h1>
  </el-dialog>

  <el-dialog title="待发货" :visible.sync="dialogFormVisibleFa" width="500px">
    <h1>待发货</h1>
  </el-dialog>

  <el-dialog title="待收货" :visible.sync="dialogFormVisibleReceipt" width="500px">
    <h1>待收货</h1>
  </el-dialog>

  <el-dialog title="待评价" :visible.sync="dialogFormVisibleEvaluate" width="500px">
    <h1>待评价</h1>
  </el-dialog>

  <el-dialog title="我的收藏" :visible.sync="dialogFormVisibleCollect" width="500px">
    <div v-for="ite in list">
      <el-image
        style="width: 60px; height: 60px;margin-left: 10px;"
        :src="ite.img"></el-image>
     <span style="padding: 10px;margin:10px"> {{ite.title}}</span>
      {{ ite.price}}
      <i @click="deleteCollect(ite.title)" style="width:1px;height: 1px;" class="el-icon-delete"></i>
      <el-divider></el-divider>
    </div>

  </el-dialog>

  <el-dialog title="地址管理" :visible.sync="dialogFormVisibleAddress" width="500px">
    <div v-for="addr in addressList">
      <p>{{addr.addr}}</p>
      {{addr.name}}
      {{addr.phone}}


      <el-button style="float: right" @click="radio(addr.id)"   >默认地址</el-button>
      <el-button type="danger" style="float: right"><i @click="deleteAddr(addr.id)" style="width:1px;height: 1px;">删除</i></el-button>
      <el-button type="primary" style="float: right"><i @click="updateAddr(addr.id)" style="width:1px;height: 1px;">编辑</i></el-button>
      <el-divider></el-divider>
    </div>
      <center> <el-button type="primary" @click="addToAddress">新增地址</el-button></center>
  </el-dialog>

  <el-dialog title="地址修改" :visible.sync="dialogFormVisibleUpdateAddr" width="500px">
    <el-form label-width="70px">

      <el-form-item label="收货人">
        <el-input v-model="form.name" type="textarea" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="联系电话号">
        <el-input v-model="form.phone" type="textarea" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="选择城市">
        <el-input v-model="form.city" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="详细地址">
        <el-input v-model="form.addr" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="地址类型">
        <el-select v-model="form.addrType" placeholder="选择分类">
          <el-option label="家" :value=1></el-option>
          <el-option label="公司" :value=2></el-option>
          <el-option label="其他" :value=3></el-option>
        </el-select>
      </el-form-item>

    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="success" @click="AddrTrueUpdate">确定</el-button>
      <el-button  @click="dialogFormVisibleUpdateAddr=false">返回</el-button>
    </div>
  </el-dialog>

  <el-dialog title="地址新增" :visible.sync="dialogFormVisibleaAddToAddress" width="500px">
    <el-form label-width="70px">

      <el-form-item label="收货人">
        <el-input v-model="form.name"  autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="联系电话">
        <el-input v-model="form.phone"  autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="选择城市">
        <el-input v-model="form.city" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="详细地址">
        <el-input v-model="form.addr" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="地址类型">
        <el-select v-model="form.addrType" placeholder="选择分类">
          <el-option label="家" :value=1></el-option>
          <el-option label="公司" :value=2></el-option>
          <el-option label="其他" :value=3></el-option>
        </el-select>
      </el-form-item>

    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="success" @click="AddToAddress">确定</el-button>
      <el-button  @click="dialogFormVisibleaAddToAddress=false">返回</el-button>
    </div>
  </el-dialog>




  <el-dialog title="意见反馈" :visible.sync="dialogFormVisibleOpinion" width="500px">
    <form style="height: 100px">
      <el-form>
        <el-input type="textarea"></el-input>
      </el-form>

      <el-button style="float: right" type="primary" @click="">提交意见</el-button>
    </form>
  </el-dialog>





</div>


</template>

<script>
export default {
  name: "person",
  data(){
    return{
      photo:'https://img2.baidu.com/it/u=3094149767,177600321&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1668272400&t=9657735b8f76a8acd269ceee1649bd82',
      name:'狗头',

      dialogFormVisibleFu:false,//待付款
      dialogFormVisibleFa:false,//待发货
      dialogFormVisibleReceipt:false,//待收货
      dialogFormVisibleEvaluate:false,//待评价
      dialogFormVisibleCollect:false,//待收藏
      dialogFormVisibleAddress:false,//收货地址
      dialogFormVisibleOpinion:false,//意见反馈
      dialogFormVisibleUpdateAddr:false,//修改地址
      dialogFormVisibleaAddToAddress:false,//新增地址

      list:[
        {
        img:'https://img2.baidu.com/it/u=2015865969,3401990894&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1668272400&t=d7caf2f978f80e67e1d9b3c6d4f6bf07',
        price:'￥110',
        title:'商品标题',
      },
        {
          img:'https://img1.baidu.com/it/u=3178057158,4110048229&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1668272400&t=e8ba46a21b14ece93c28ea0ad2bf1b14',
          price:'￥200',
          title:'商品标题2',
        },
      ],

      addressList:[
        {
          addr:'北京市昌平区',
          name:'鲁班',
          phone:'120',
       },
        {
          addr:'北京市海淀区',
          name:'赵云',
          phone:'130',
        },

      ],
      form:{},

    }
  },
  created(){

  },
  methods:{
    //代付款
    dai(){
      this.dialogFormVisibleFu=true
    },
    //已付款
    yi(){
      this.dialogFormVisibleFa=true
    },
    //待收货
    receipt(){
      this.dialogFormVisibleReceipt=true
    },
    //待评价
    evaluate(){
      this.dialogFormVisibleEvaluate=true
    },
    //我的收藏
    collect(){
      this.dialogFormVisibleCollect=true
    },
    //地址管理
    address(){
      this.dialogFormVisibleAddress=true
    },
    opinion(){
      this.dialogFormVisibleOpinion=true
    },
    //删除我的收藏
    deleteCollect(){
    alert("1")
    },

    //删除地址
    deleteAddr(){
      alert("2")
    },
    //修改地址弹框
    updateAddr(){
      this.dialogFormVisibleUpdateAddr=true
    },
    //确定地址修改
    AddrTrueUpdate(){
      alert("1")
    },
    //添加地址的弹框
    addToAddress(){
      this.dialogFormVisibleaAddToAddress=true
    },
    //地址添加确定
    AddToAddress(){
      alert("地址添加")
    },
    radio(){
      alert("1")
    }





  }
}
</script>

<style scoped>



</style>
